
<template>
  <div class="dao" @click="todoClick" :style="mstyle">
    <van-circle
      v-model:current-rate="currentRate"
      :rate="rate"
      :size="size"
      :stroke-width="swidth"
      :speed="speed"
      :text="text"
      :clockwise="!flag"
      :color="color"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, toRefs, watchEffect } from "vue";

const props: any = defineProps({
  time: {
    type: Number,
    default: 5,
  },
  toggle: {
    type: Boolean,
    default: false,
  },
  isClick: {
    type: Boolean,
  },
  onFinsh: {
    type: Function,
    default() {
      return () => {};
    },
  },
  flag: {
    type: Boolean,
  },
  color: {
    type: [Object, String],
    default() {
      return {
        "0%": "#3fecff",
        "100%": "#6149f6",
      };
    },
  },
  mstyle: {
    type: Object,
    default() {
      return {};
    },
  },
  size: {
    type: String,
    default: "60px",
  },
  swidth: {
    type: Number,
    default: 40,
  },
});
interface objType {
  currentRate: number;
  rate: number;
}
const obj = reactive<objType>({
  currentRate: 0,
  rate: 100,
});
const { rate, currentRate } = toRefs<objType>(obj) as any;

const speed = computed({
  get() {
    return obj.rate / props.time;
  },
  set(v) {},
});
const text = computed(() => {
  return props.toggle
    ? Math.floor((rate.value - currentRate.value) / speed.value) + "S"
    : obj.currentRate.toFixed(0) + "%";
});
watchEffect(() => {
  if (currentRate.value == 100) {
    props.onFinsh();
  }
});
const todoClick = () => {
  if (props.isClick) {
    props.onFinsh();
  }
};
</script>

<style scoped  lang="scss" >
.dao {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  ::v-deep .van-circle__text {
    color: #3fecff !important;
    font-size: 18px !important;
  }
}
</style>

